<template>
  <div class="limited-time-buy">
    <FloorHeader title="限时购" :link="$t('limitedTimeBuyTip')"/>
    <div class="limited-time-buy-container">
      <!-- 宣传栏 -->
      <Swiper class="conduct" :showArrow="false">
        <SwiperItem>
          <div class="title">14点场</div>
          <div class="line"></div>
          <div class="end-tips">距离结束还剩</div>
          <div class="count-down">
            <CountDown :endTime="endTime"/>
          </div>
          <button class="more">查看更多</button>
        </SwiperItem>
      </Swiper>
      <!-- 商品 -->
      <div class="product-list">
        <div class="product" v-for="(item, index) in amount" :key="index">
          <img src="https://yanxuan.nosdn.127.net/71ba49bb2d5d1cde1499cad0e18f0ac2.png?imageView&thumbnail=180x180&quality=95" alt="">
          <div class="content">
            <div class="product-name">真空压缩袋真空压缩袋真空压缩袋真空压缩袋真空压缩袋真空压缩袋</div>
            <div class="product-tips">手动压缩，节省空间</div>
            <!-- 进度条 -->
            <ProgressBar class="pbar" :max="100" :current="50"/>
            <!-- 限时价 -->
            <div class="current-price">
              限时价
              <span class="current">{{ $t('priceSymbol') }}59.3</span>
              <span class="old">{{ $t('priceSymbol') }}79</span>
            </div>
            <div class="btn-buy">立即抢购</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FloorHeader from '@/components/index/FloorHeader'
import CountDown from '@/components/common/CountDown'
import ProgressBar from '@/components/common/ProgressBar'

export default {
  components: {
    FloorHeader,
    CountDown,
    ProgressBar
  },

  data () {
    return {
      endTime: (new Date('2018-11-29').getTime() - Date.now()),
      amount: 4
    }
  }
}
</script>

<style lang="less" scoped>
@import "./../../styles/variable";
@import "./../../styles/common";

.limited-time-buy {
  .limited-time-buy-container {
    border: 1px solid @border-color;
    display: flex;
    height: 378px;
    .conduct {
      background: url('http://yanxuan.nosdn.127.net/c9aeb62a3f79123d793d8c49b6698b09.jpg') center center no-repeat;
      width: 224px;
      height: 100%;
      .title {
        color: @font-color-golden-dark;
        font-size: 28px;
        line-height: 36px;
        padding: 60px 0px 10px;
        text-align: center;
      }
      .line {
        background: @font-color-golden-dark;
        width: 20px;
        height: 2px;
        margin: 0 auto 20px;
      }
      .end-tips {
        color: @font-color-golden-dark;
        font-size: 18px;
        margin-bottom: 16px;
        line-height: 22px;
        text-align: center;
      }
      .count-down {
        margin-bottom: 60px;
      }
      .more {
        background-color: @bg-color-golden;
        border: 0px;
        border-radius: 16px;
        color: @write;
        cursor: pointer;
        display: block;
        font-size: 14px;
        outline: none;
        width: 110px;
        height: 30px;
        margin: 0 auto;
        line-height: 30px;
      }
    }
    .product-list {
      flex: 1;
      overflow: hidden;
      .product {
        border-right: 1px solid @border-color;
        border-bottom: 1px solid @border-color;
        color: @font-color-six;
        font-weight: 400;
        float: left;
        width: 50%;
        height: 50%;
        overflow: hidden;
        &:hover {
          img {
            transform: scale(1.02, 1.02);
          }
        }
        &:nth-child(even) {
          border-right: 0px;
        }
        &:nth-child(3) {
          border-bottom: 0px;
        }
        &:nth-child(4) {
          border-bottom: 0px;
        }
        img {
          .transition-fast;
          float: left;
          width: 180px;
          height: 180px;
        }
        .content {
          margin-left: 190px;
          .product-name {
            font-size: 16px;
            line-height: 26px;
            height: 26px;
            margin: 8px 0px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .product-tips {
            font-size: 14px;
            line-height: 24px;
            height: 24px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .pbar {
            margin: 10px 0px;
          }
          .current-price {
            color: @font-color-red;
            font-size: 14px;
            .current {
              font-size: 24px;
              font-weight: 700;
            }
            .old {
              color: @font-color-grey;
              font-size: 14px;
              text-decoration: line-through;
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
